<!--
  *@Description : 这里是个人信息页面
  *@author 萧红
  *@date 2020-04-14 18:20
  *@LastEditTime 2020-04-14 18:20
  *@LastEdititors
-->
<template>
    <div id="userDetail">
      <Tittle :title="title + '的主页'"></Tittle>
      <div :style="{height: $inerHeight + 55 + 'px'}">
        <cube-sticky :pos="scrollY" fixed-show-ani="sticky-fixed-show">
          <cube-scroll
            :options="{pullDownRefresh: false, pullUpLoad: this.pullUpLoadObj,probeType: 1}" @pulling-up="onPullingUp"
            ref="scroll" :data="dongTaiData" :scroll-events="['scroll-end']"   @scroll-end="scrollHandler"
          >
          <!--背景图区域-->
            <div class="bgImg" :style="{background: `url(${userData.bgImgUrl}) 0% 0%/cover no-repeat`}"></div>
            <div class="information">
              <div class="avatar" :style="{background: `url(${userData.avatarUrl}) 0% 0%/cover no-repeat`}"></div>
              <!--勾搭按钮，关注按钮-->
              <div class="action-btngroup">
                <div v-if="isSelf">
                  <span class="gouda" @click="toNewPage('/editInfo')">编辑资料</span>
                </div>
                <div v-else>
                  <span class="gouda">勾搭TA</span>
                  <span class="guanzhu">关注</span>
                </div>
              </div>
              <!--昵称性别cos号区域-->
              <div class="name-sex-cosNum">
                <div class="name">{{userData.name}}</div>
                <div class="sex">
                  <span class="iconfont" :class="userData.sex === 1 ? 'iconnanxing':'girl iconnvxing'"></span>
                </div>
                <div class="cosnumber">cos号: {{userData.cosNumber}}</div>
              </div>
              <!--签名-->
              <div class="sign-area">
                {{userData.sign}}
              </div>
              <!--address-->
              <div class="address-area">
                <span class="cubeic-location"></span>
                <span>{{userData.province}}</span>
                <span>{{userData.city}}</span>
              </div>
              <!--粉丝数关注数人气数区域-->
              <div class="fans-guanzhu-renqi-area">
                <div class="fans">
                  <span class="number">{{userData.fansNumber}}</span>
                  <span>粉丝</span>
                </div>
                <div class="guanzhu">
                  <span class="number">{{userData.guanZhuNumber}}</span>
                  <span>关注</span>
                </div>
                <div class="renqi">
                  <span class="number">{{userData.popularity}}</span>
                  <span>人气</span>
                </div>
              </div>
            </div>
            <!--发布赞过-->
            <cube-sticky-ele>
              <div class="nav">
                <div>
                  <span class="selected" @click="changeNav">发布</span>
                </div>
                <div>
                  <span @click="changeNav">赞过</span>
                </div>
              </div>
            </cube-sticky-ele>
          <!--文本区域-->
            <div class="mode" v-for="(mData,index) in dongTaiData" :key="index">
            <!--文本区域-->
            <div class="date">{{mData.create_time}}</div>
            <div class="text" v-if="mData.content.length > 0">
              {{mData.content}}
            </div>
            <!--多张图片区域-->
            <div class="view" v-if="mData.type==='image'"  @click.self="goDetail(mData)">
              <img-area :imgFileList="mData.urls"></img-area>
            </div>
            <!--视频区域-->
            <div class="video" v-if="mData.type==='video'">
              <my-video :vedio-url="mData.urls[0]" :index="mData.videoIndex!==-1?mData.videoIndex:''" :poster="mData.urls[1]"></my-video>
            </div>
            <!--标签区域-->
            <div class="label">
              <div v-for="label in mData.labels" :key="label">{{label}}</div>
            </div>
              <!--如果是自己的主页就出现删除动态按钮-->
            <div class="del-btn" v-if="isSelf&&scene === 'release'" @click="delDongTai(mData)">
              <span class="cubeic-delete"></span>
            </div>
            <!--用户交互区域-->
            <div class="action">
              <!--点赞-->
              <div @click="dianzan(mData)">
                <span class="iconfont icondamuzhi" :class="{'selected': mData.indianzan}"></span>
                <span class="number">{{mData.dianzan}}</span>
              </div>
              <!--评论-->
              <div @click="goDetail(mData)">
                <span class="iconfont iconxiaoxi1"></span>
                <span class="number">{{mData.pinglun}}</span>
              </div>
              <!--收藏-->
              <div @click="shouChang(mData)">
                <span class="iconfont iconshoucang" :class="{'selected':mData.inshouchang}"></span>
                <span class="number">{{mData.shoucang}}</span>
              </div>
            </div>
          </div>
          </cube-scroll>
        </cube-sticky>
      </div>
    </div>
</template>

<script>
import Tittle from '../../components/Tittle'
import imgArea from '../../components/imgArea'
import Info from '../../components/Info'
import AddPinlun from '../../components/AddPinlun'
import MyVideo from '../../components/MyVideo'
import {PullDownRefreshAndPullUpLoad} from '../../common/js/mixins'
export default {
  name: 'UserDetail',
  components: {
    Tittle,
    imgArea,
    Info,
    AddPinlun,
    MyVideo
  },
  mixins: [PullDownRefreshAndPullUpLoad],
  data () {
    return {
      pullUping: false, // 是否正在上拉
      scrollY: 0,
      title: '',
      userData: {
        // bgImgUrl: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1560047347,1687242609&fm=26&gp=0.jpg',
        // avatarUrl: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3415058612,1575186669&fm=11&gp=0.jpg',
        // name: '轩子巨二兔', // 昵称
        // sex: 0, // 性别 0 女性，1男
        // cosNumber: '153700466', // cosNubmer
        // sign: '今天也是美好的一天', // 签名信息
        // province: '北京',
        // city: '东城',
        // fansNumber: 4329, // 粉丝数，
        // guanZhuNumber: 4, // 关注数
        // popularity: 10853 // 人气数
      },
      dongTaiData: [], // 保存发布的动态数据
      zanguoData: [], // 赞过的动态数据
      scene: 'release' //  导航栏处于的位置，release表示发布，liked代表赞过
      // mData: {
      //   info: {
      //     img: 'https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3917532533,163531716&fm=26&gp=0.jpg',
      //     name: 'saberLily',
      //     sex: '女',
      //     time: '3月前'
      //   },
      //   content: '祝眉目舒展 询问东安',
      //   // urls: [
      //   //   'https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3729370217,3656240524&fm=26&gp=0.jpg',
      //   //   'https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3917532533,163531716&fm=26&gp=0.jpg',
      //   //   'https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1688806058,3868462331&fm=26&gp=0.jpg'
      //   // ],
      //   urls: [
      //     'http://112.126.100.206/userdata/videos/20200406/e54809df959a8874359be578b899f3c0.mp4',
      //     'http://112.126.100.206/userdata/videos/20200406/112b6f4c8e635669deba59948e3d93be.png'
      //   ],
      //   labels: [
      //     'cos日常',
      //     'saber系列'
      //   ],
      //   dianzan: 220,
      //   pinglun: 8,
      //   shoucang: 2,
      //   type: 'video'
      // }
    }
  },
  computed: {
    isSelf () {
      return localStorage.getItem('userId') === this.$route.query.userId
    }
  },
  mounted () {
    // 这里写请求后端
    this.getData()
  },
  methods: {
    scrollHandler ({y}) {
      this.scrollY = -y
    },
    onPullingUp () {
      if (this.pullUping) {
        return false
      }
      this.page++
      let params = {
        page: this.page,
        userId: this.$route.query.userId,
        scene: this.scene
      }
      this.apis.getUserDongTai(params).then(res => {
        if (res.data.length === 0) { // 如果没有就要显示没有更多了
          // 如果请求结果没有数据更新，则必须调用 Scroll 组件的forceUpdate()方法结束此次下拉刷新/上拉加载
          this.$refs.scroll.forceUpdate()
        } else {
          this.dongTaiData = this.dongTaiData.concat(res.data)
        }
      })
    },
    // 获取用户信息的方法
    getData () {
      // 请求后端数据
      this.$toast('加载中(*^▽^*)', 'loading', 0)
      let params = {
        page: this.page,
        userId: this.$route.query.userId,
        scene: this.scene
      }
      this.apis.getUserDetail(params).then(res => {
        if (res.code === 200) {
          // console.log(res.data)
          this.$toast('加载成功', 'correct', 500)
          this.userData = res.data
          this.title = this.userData.name
        }
      })
      this.apis.getUserDongTai(params).then(res => {
        if (res.code === 200) {
          this.dongTaiData = res.data
          let index = 0
          this.dongTaiData.forEach((item) => {
            if (item.type === 'video') {
              item.videoIndex = index // 保存视频的index
              index++
            } else {
              item.videoIndex = -1
            }
          })
          // console.log(this.dongTaiData)
        }
      })
    },
    // 改变导航栏是用的方法。
    changeNav (e) {
      this.page = 1 // 页数初始化为第一页
      // this.dongTaiData = [] // 清空数据让视图更着变化
      let current = e.currentTarget
      // 单击了已经选中的导航栏，就不请求后台了
      if (current.classList.contains('selected')) {
        return false
      }
      let navs = document.querySelectorAll('.nav span')
      for (let i = 0; i < navs.length; i++) {
        navs[i].classList.remove('selected')
      }
      current.classList.add('selected')
      if (this.scene === 'release') {
        this.scene = 'liked'
      } else { this.scene = 'release' }
      let params = {
        page: this.page,
        userId: this.$route.query.userId,
        scene: this.scene
      }
      this.$toast('正在加载中', 'loading', 5000)
      this.apis.getUserDongTai(params).then(res => {
        if (res.code === 200) {
          this.$toast('加载成功 ', 'correct', 1)
          this.dongTaiData = res.data
          let index = 0
          this.dongTaiData.forEach((item) => {
            if (item.type === 'video') {
              item.videoIndex = index // 保存视频的index
              index++
            } else {
              item.videoIndex = -1
            }
          })
          // console.log(this.dongTaiData)
        }
      })
    },
    goDetail (data) {
      // console.log(data)
      this.toNewPage({name: 'dongtaiDetail', query: {data: JSON.stringify(data)}})
    },
    dianzan (data) {
      let params = {
        userId: localStorage.getItem('userId'),
        did: data.did
      }
      if (data.indianzan === 0) {
        this.apis.addDianZan(params).then(res => {
          if (res.code === 200) {
            this.$toast(res.msg, 'correct')
            this.getData()
          } else {
            this.$toast(res.msg, 'error', 1000)
          }
        })
        console.log(params)
      } else {
        this.apis.cancelDianZan(params).then(res => {
          if (res.code === 200) {
            this.$toast(res.msg, 'correct')
            this.getData()
          } else {
            this.$toast(res.msg)
          }
        })
      }
    },
    shouChang (data) {
      let params = {
        userId: localStorage.getItem('userId'),
        did: data.did
      }
      if (data.inshouchang === 0) {
        this.apis.addShouChang(params).then(res => {
          if (res.code === 200) {
            this.$toast(res.msg, 'correct')
            this.getData()
          } else {
            this.$toast(res.msg, 'error', 1000)
          }
        })
        console.log(params)
      } else {
        this.apis.cancelShouChang(params).then(res => {
          if (res.code === 200) {
            this.$toast(res.msg, 'correct')
            this.getData()
          } else {
            this.$toast(res.msg)
          }
        })
      }
    },
    delDongTai (data) {
      this.$createDialog({
        type: 'confirm',
        icon: 'cubeic-delete',
        title: '删除动态',
        content: '谨慎操作，不可逆转',
        confirmBtn: {
          text: '确定',
          active: true,
          disabled: false,
          href: 'javascript:;'
        },
        onConfirm: () => {
          let params = {
            userId: data.user_id,
            did: data.did
          }
          this.apis.delSelfDongTai(params).then(res => {
            if (res.code === 200) {
              this.$toast('删除成功', 'correct')
              setTimeout(this.getData, 1200)
            }
          })
        }
      }).show()
    }
  }
}
</script>

<style  lang="stylus">
@import "../../../node_modules/stylus-px2rem"
#userDetail
{
  width 100%
  .bgImg
  {
    width 100%
    height: 50px
  }
  .information
  {
    width 100%
    background-color white
    position relative
    padding 0px 5px
    .avatar
    {
      width 30px
      height: 30px
      border-radius 50%
      position: absolute
      transform translateY(-50%)
    }
    .action-btngroup
    {
      margin-top:3px
      width 100%
      height 12px
      padding-right 10px
      display flex
      flex-flow row nowrap
      justify-content flex-end
      box-sizing border-box
      span
      {
        width 30px
        height 12px
        line-height 12px
        display inline-block
        border-radius 2px
      }
      .gouda
      {
        margin-right:5px
        color #ff689b
        border: 1px solid #ff689b
      }
      .guanzhu
      {
        background-color #ff689b
        color snow
        border: 1px solid #ff689b
      }
    }
    .name-sex-cosNum
    {
      width 100%
      height 15px
      margin-top:5px
      display flex
      align-items center
      div {margin-right:5px;}
      .name
      {
        color: black
        font-size 8px
        font-weight bolder
      }
      .sex
      {
        span
        {
          font-size:6px
        }
        .girl
        {
          color #ff689b
        }
      }
      .cosnumber{color:#999}
    }
    .sign-area
    {
      width 100%
      height 10px
      line-height 10px
      text-align left
      color #4e5050
    }
    .address-area
    {
      width 100%
      height: 10px
      line-height 10px
      text-align left
      color:#999
      span {margin-right:2px;}
    }
    .fans-guanzhu-renqi-area
    {
      width: 100%
      height 20px
      line-height 20px
      display flex
      div
      {
        padding 0px 2px
        span
        {
          margin-right 3px
          color #999
        }
        .number
        {
          font-size 7px
          font-weight bolder
          color black
        }
      }
    }
  }
  .nav
  {
    width 100%
    height 25px
    line-height 25px
    display flex
    background-color white
    border-bottom 6px solid #f0f0f0
    div
    {
      width: 50%
      span
      {
        padding 0px 10px
        display inline-block
        height 25px
        line-height 30px
        font-size 7px
        font-weight bolder
        box-sizing border-box
      }
      .selected
      {
        color #ff689b
        border-bottom 1.2px solid #ff689b
      }
    }
  }
  .mode
  {
    position relative
    padding 2px 2px;
    border-bottom 3px solid #f0f0f0
    .date
    {
      text-align left
      color #999
      padding 2px 2px;
    }
    .text
    {
      padding 5px 2px;
      text-align left;
    }
    .video{
      margin-top:5px
    }
    .label
    {
      display flex
      flex-direction row
      justify-content flex-start
      padding 2px 1.3px;
      div
      {
        display inline
        margin 2px
        padding 0px 2px
        height 10px;
        line-height 10px;
        background #fff1f1;
        color:deeppink;
      }
    }
    .del-btn
    {
      position absolute
      right: 7px
      top: 3px
      span
      {
        color #ff74a3
        font-size 10px
      }
    }
    .action
    {
      width 100%;
      display grid
      height:15px
      padding 2px 2px
      grid-template-columns repeat(3,25%)
      grid-column-gap 12%
      .selected
      {
        color #ff4466
      }
      span{
        font-size 10px
        height:15px;
        line-height 15px;
        color:#ccc;
      }
      .number
      {
        font-size: 8px
        padding 0px 2px
      }
      border-top 1px solid #eee
    }
  }
  .sticky-fixed-show-enter, .sticky-fixed-show-leave-active
  {
    transform: translate(0, -100%)
  }
  .sticky-fixed-show-enter-active,.sticky-fixed-show-leave-active
  {transition: all .5s ease-in-out}
}
</style>
